<template>
    <div>
        <h1>李嘉琳2025.1.8作业</h1>
        <ul>
            <li v-for="(item,index) in arr":key="index">{{ index }}-{{ item }}</li>
        </ul>
        <hr>
        <p v-for="(item,index) in obj">{{ index }}--{{ item }}</p>
        <table border="1">
            <tbody>
                <tr>
                <td>Id</td>
                <td>name</td>
                <td>age</td>
                </tr>
                <tr v-for="item in objArr" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td >{{ item.age }}</td>
                </tr>
            </tbody>
        </table>

        <select>
            <option value="">请选择</option>
            <option v-bind:value="item.id" v-for="item in address">{{ item.name }}</option>
        </select>
    </div>
</template>

<script setup lang="ts">
    //v-bind:单项绑定，属于Vue的指令之一，主要用于绑定标签属性(只能用于option中的属性，属性后必须是数据)
    //v-for:循环 (item,index) in 变量 item表示变量中的某一项 index表示索引值 item不省略 index可以省略
    import { ref } from 'vue';
    let arr=ref([1,3,4,564,321,2323]);
    let obj=ref({name:'张三',age:'20'});
    let objArr=ref([
        {id:1,name:'张11',age:10},
        {id:2,name:'张22',age:11},
        {id:3,name:'张33',age:12},
        {id:4,name:'张44',age:13},
    ]);
    let address=ref([
        {id:1,name:'山西'},
        {id:2,name:'山东'},
        {id:3,name:'河北'},
        {id:4,name:'河南'},
    ])
</script>

<style scoped>

</style>